import React from "react";
function LevelOne(props) {
  // LevelOne 重新渲染时打印一下
  console.log("LevelOne Render");
  return (
    <div
      style={{
        backgroundColor: "green",
      }}
    >
      <h1>Level One</h1>
      {/* 子组件接收到了 num 值直接展示 */}
      <span>props:{props.num}</span>
      <p>
        {/* 通过父组件传递过来的 onClick 事件对 num 进行更新 */}
        <button onClick={props.onClick}>num +1</button>
      </p>
    </div>
  );
}
// 使用 React.memo，对传入的 props 进行浅比较，类似于类组件中的 PureComponent
export default React.memo(LevelOne);
